<!DOCTYPE html>
<html>
<head>
    <script src="./project/lib/vue3.4.21.js"></script>
</head>
<style>
    
</style>
<body>
    </pre>
    <div id="app">
        省<select @change="reload1" v-model="p">
            <option v-for="(item,key) in data" :value="key">{{key}}</option>
        </select>
        市<select @change="reload2" v-model="c">
            <option v-for="(item,key) in shi" :value="key">{{key}}</option>
        </select>
        县（市区）<select v-model="x">
            <option v-for="key in xian" :value="key">{{key}}</option>
        </select>
        <hr />
        p={{p}} c={{c}} x={{x}}

    </div>
    <script type="module">
        var c = 0;
        const app = Vue.createApp({
            //响应式变量
            data(){
                return {
                    data:{
                        "河南省":{
                            "郑州市":['中原区','金水区','二七区'],
                            "洛阳市":['涧西区','洛龙区','伊滨区','老城区']
                        },
                        "河北省":{
                            "石家庄市":[],
                            "邯郸市":[]
                        },
                        "山西省":{
                            "太原市":[],
                            "忻州市":[]
                        }
                    },
                    shi:[],
                    xian:[],
                    p:'',
                    c:'',
                    x:''
                }
            },
            //方法 
            methods:{
                reload1(){
                    if(this.p==""){
                        this.c = ""
                        this.x = ""
                        return;
                    }
                    this.shi = this.data[this.p]
                },
                reload2(){
                    if(this.c==""){
                        this.x = ""
                        return;
                    }
                    this.xian = this.data[this.p][this.c]
                }
            },
            //初始化事件
            mounted(){
                console.log("已挂在节点")
            }
        }).mount("#app");
    </script>

<pre>
  
</body>
</html>